<template>
  <div>
    <div style="border-bottom: 1px solid #eeeeee;padding-bottom: 10px">
      <p style="display: flex;align-items: center">
        <el-page-header @back="goBack"></el-page-header>
        <span style="font-size: 16px;font-weight: bold">添加巡查项</span>
      </p>
    </div>
    <div style="padding: 10px;border-bottom: 1px solid #eee">
      <p>
        巡查项名称 <span style="color: #ce0e0f">*</span>
      </p>
      <p>
        <el-input size="small" style="margin-top: 5px;width: 350px" placeholder="请输入巡查项名称"
                  v-model="data.termName"></el-input>
        当前问题和：
        <el-input size="small" style="margin: 5px 5px;width: 150px" :disabled="true"
                  v-model="largeProblemNum"></el-input>
      </p>
      <p style="margin-top: 20px">
        巡查项说明
      </p>
      <p>
        <el-input size="small" style="margin-top: 5px;width: 505px"
                  type="textarea" placeholder="巡查项的标准说明" v-model="data.termDescribe"></el-input>
      </p>
      <!--      <p style="margin-top: 20px">-->
      <!--        巡查项标准-->
      <!--      </p>-->
      <!--      <p style="margin-top: 15px">-->
      <!--        <el-upload-->
      <!--            class="upload-demo"-->
      <!--            :headers="headers"-->
      <!--            :action="`${$apiHost}/img/fileImgUrl`"-->
      <!--            :on-remove="deletePrePic"-->
      <!--            :file-list="preSalesImgList"-->
      <!--            multiple-->
      <!--            :on-success="getSuccess"-->
      <!--            list-type="picture-card">-->
      <!--          <i class="el-icon-plus"></i>-->
      <!--          <span style="display: block" slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</span>-->
      <!--        </el-upload>-->
      <!--      </p>-->
    </div>


    <div style="padding: 10px">
      <span style="font-weight: bold;display: block"> 巡查问题</span>
      <p style="margin: 10px 0">
        <el-button size="small" style="background-color:#eee;" @click="addPro"><i class="el-icon-plus"></i>添加
        </el-button>
        <el-button size="small"><i class="el-icon-copy-document"></i> 批量操作</el-button>
      </p>
      <el-table :data="patrolProblem">
        <el-table-column prop="problemName" label="问题项名称"></el-table-column>
        <el-table-column prop="problemScore" label="分值"></el-table-column>
        <el-table-column prop="problemType" label="问题类型">
          <template v-slot:default="scope">
            <span v-if="scope.row.problemType==1">一般问题</span>
            <span v-if="scope.row.problemType==2">重要问题</span>
            <span v-if="scope.row.problemType==3">红线问题</span>
          </template>
        </el-table-column>
        <el-table-column label="整改是否传图">
          <template v-slot:default="scope">必须传图</template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-link><i class="el-icon-edit"></i></el-link>
          </template>
        </el-table-column>
      </el-table>


    </div>
    <el-button style="background-color:#303e9d;color: #eeeeee" @click="submitPatrolTic">提 交</el-button>
    <el-button @click="goBack">返 回</el-button>
    <add-problem ref="addP" @addStatus="receiveMessage"></add-problem>
  </div>
</template>

<script>
import addProblem from "./addProblem.vue";

export default {
  name: "addInspection",
  components: {
    addProblem,
  },
  data() {
    return {
      avatarUrl: [],
      result: 1,
      problemDraw: false,
      patrolProblem: [],
      largeProblemNum: "",
      largeId: "",
      standardImg: [],
      data: {
        termName: "",
        termDescribe: ""
      },
      standardImgList: [],
      preSalesImgList: [],
      preSalesImg: []
    }
  },
  created() {
    // this.fetchUser(this.$route.query)
  },
  watch: {
    '$route.query': {
      handler(newQuery) {
        this.fetchUser(newQuery)
      },
      immediate: true
    }
  },
  computed: {
    headers() {
      const token = window.$quinn.getStorage("tokenv3")
      return {
        token,
      };
    }
  },
  methods: {
    fetchUser(val) {
      this.largeId = val.largeId
      this.largeProblemNum = val.largeProblemNum
      this.data=this.$options.data().data
      this.patrolProblem=this.$options.data().patrolProblem

      // this.score = val.score
      // if (!val.templateId) return
      // this.getCate(val.templateId)
    },
    goBack() {
      this.$router.back()
    },
    getSuccess(res) {
      if (Array.isArray(res.result)) {
        this.preSalesImg.push(res.result[0])
      }
      // console.log(this.preSalesImg)
    },
    deletePrePic(file, fileList) {
      const imageUrls = fileList.map(item => item.response.result[0]);
      this.preSalesImg = imageUrls
    },
    getStandardSuccess(res) {
      if (Array.isArray(res.result)) {
        this.standardImg.push(res.result[0])
      }
    },
    deleteStandardPic(file, fileList) {
      const imageUrls = fileList.map(item => item.response.result[0]);
      this.standardImg = imageUrls
    },
    addPro() {
      this.$refs.addP.handleOpen()
    },
    receiveMessage(val) {
      this.patrolProblem.push(val)
    },
    submitPatrolTic() {
      const data = {
        ...this.data,
        largeId: this.largeId,
        list: this.patrolProblem
      }
      this.$api.patrolAddPatrolTemplateLargeTerm(data).then(res => {
        if (res == 1) {
          this.$message.success('操作成功！')
          this.$router.back()
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.avatar-uploader {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #303e9d;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  color: #303e9d;
  background-color: #303e9d;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>